<template>
  <app-dialog-form
    :title="props.id ? '编辑角色' : '添加角色'"
    :confirm="handleDialogSubmit"
    @closed="handleDialogClose"
    @open="handleDialogOpen"
  >
    <el-form
      class="el-form--label-top"
      :model="formData"
      :rules="formRules"
      v-loading="formLoading"
      ref="form"
    >
      <el-form-item
        label="角色编号"
        prop="id"
      >
        <el-input
          type="number"
          maxlength="10"
          v-model="formData.id"
          placeholder="请输入角色编号"
        />
      </el-form-item>
      <el-form-item
        label="角色名称"
        prop="name"
      >
        <el-input
          v-model="formData.name"
          placeholder="请输入角色名称"
        />
      </el-form-item>
      <el-form-item
        label="角色描述"
        prop="profile"
      >
        <el-input
          v-model="formData.profile"
          placeholder="请输入角色描述"
        />
      </el-form-item>
    </el-form>
  </app-dialog-form>
</template>

<script lang="ts" setup>
import type { PropType } from 'vue'
import { ref } from 'vue'
import { getRoleMenus, upSaveRole } from '@/api/role'
import type { IRoleResponseMenu } from '@/api/types/role'
import type { IElForm, IFormItemRule } from '@/types/element-plus'
import { ElMessage } from 'element-plus'
const formData = ref({
  id: null, // 角色编号
  name: '', // 状态
  profile: ''
})

const props = defineProps({
  id: {
    type: Number as PropType<number | null>,
    default: null
  }
})
interface EmitType {
  (e: 'update:admin-id', value: number | null): void
  (e: 'success'): void
}

const emit = defineEmits<EmitType>()

const munus = ref<IRoleResponseMenu[]>([])
const form = ref<IElForm | null>(null)
// const tree = ref<IEltree | null>(null)
const formLoading = ref(false)

const formRules: IFormItemRule = {
  id: [
    { required: true, message: '请输入记录编号', trigger: 'blur' }
  ],
  name: [
    { required: false, message: '请输入角色名称', trigger: 'blur' }
  ],
  profile: [
    { required: false, message: '请输入角色描述', trigger: 'blur' }
  ]
}

const queryMenus = async () => {
  const data = await getRoleMenus()
  munus.value = data.menus
}

const queryRole = async () => {
  // if (!props.id) return
  // const { menus: DataMenus, role } = await getRole(props.id)
  // munus.value = DataMenus
  // await nextTick() // 菜单树渲染完成后处理后面的操作
  // formData.value.role_name = role.role_name
  // formData.value.status = role.status
  // setChecked(role.rules.split(',').map(id => Number.parseInt(id)))
}

// // 编辑设置树形菜单
// const setChecked = (menus: number[]) => {
//   menus.forEach(menusId => {
//     const node = tree.value?.getNode(menusId)
//     if (node && node.isLeaf) {
//       tree.value?.setChecked(menusId, true, false)
//     }
//   })
// }

// 保存提交表单
const handleDialogSubmit = async () => {
  const valid = await form.value?.validate()
  if (!valid) {
    return
  }
  // 添加 / 编辑角色
  // formData.value.checked_menus = [
  //   ...tree.value?.getCheckedKeys(true) as any,
  //   ...tree.value?.getHalfCheckedKeys() as any
  // ]
  // await saveRole(props.id || 0, formData.value)
  await upSaveRole(formData.value)
  emit('success')
  ElMessage.success('保存成功')
}

// 打开表单 加载 管理员身份 获取管理员列表
const handleDialogOpen = async () => {
  formLoading.value = true
  props.id
    ? await queryRole().finally(() => { formLoading.value = false })
    : await queryMenus().finally(() => { formLoading.value = false })
}

const handleDialogClose = () => {
  emit('update:admin-id', null)
  // 清楚 form 表单 必须包含 form 必须包含 ref="form"
  form.value?.clearValidate() // 清除验证结果
  form.value?.resetFields() // 清除表单数据
}

</script>

<style lang="scss" scoped>
::v-deep input::-webkit-outer-spin-button,
::v-deep input::-webkit-inner-spin-button {
  -webkit-appearance: none !important;
}
::v-deep input[type='number'] {
  -moz-appearance: textfield !important;
}
</style>
